<template>
    <div id="box">
        <!--导航条-->
        <div id="header">
            <Navbar>
                <span @click="back" slot="left" class="nav-size"><img src="static/icons/blueB.png" id="back"></span>
                <span slot="center" class="nav-size">会员登录</span>
                <span slot="right" class="nav-size">
                    <router-link to="/regist">注册</router-link>
                </span>
            </Navbar>
        </div>
        <!--登录面板-->
        <div id="login-box">
            <div id="top">
                <img src="static/icons/account.png">
                <input type="text" placeholder="用户名" v-model="loginParams.name">
            </div>
            <div id="bottom">
                <img src="static/icons/psw.png">
                <input type="password"  v-model="loginParams.psw">
            </div>
        </div>
        <button@click="loginClick">登录</button>
        <div id="other-login">
            <Divider><span>使用第三方登录</span></Divider>
            <img src="static/icons/sina.png">
        </div>
        <img src="static/img/br_tu.png" id="img-bottom">
        <div class="layer" v-show="ishow">用户或密码错误</div>
    </div>
</template>

<script>
import Navbar from '../components/Navbar.vue';
import {mapState} from "vuex"
import {Divider} from "vux";
import axios from "axios"
export default {
    data:function(){
        return{
            loginParams:{},
            ishow:false
        }
    },
    components:{
        Navbar,
        Divider
    },
    methods:{
        back(){
            history.back();
        },
        loginClick(){
            console.log(123)
            axios.post("/api/users/login",this.loginParams)
            .then(res=>{
                console.log(res.data)
                if(res.data.err){
                    this.ishow=true
                    setTimeout(function() {
                        this.ishow = false
                    }.bind(this), 1000);
                }else{
                    this.$store.commit("changeIslogin",true)
                    this.$router.push({path:"/"})
                }
            })
        }
    },
    computed:{
        ...mapState([
            "islogin"
        ])
    }
}
</script>

<style lang='css' scoped>
    #box{
        width: 100vw;
        height: 100vh;
        background-image: url(../../static/img/bg.png);
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
    }
    #header{
        height: 110px;
        width: 100vw;
        /*border: 1px solid black;*/
        background-color: #c7ddea;
    }
    .nav-size{
        font-size: 18px;
        color: #0894ec;
    }
    #back{
        width: 30px;
        height: 30px;
        margin-top: 12px;
    }
    #img-bottom{
        position: absolute;
        left:0;
        bottom: 0;
        width: 100vw;
    }
    #login-box{
        /*border: 1px solid black;*/
        padding: 10px;
        background-color: #d6e6f0;
        
    }
    #login-box img{
        /*height: 50px;*/
        width: 26px;
    }
    #login-box input{
        border: 1px solid #cadce6;
        border-left: none;
        border-right: none;
        border-top: none;
        background-color: transparent;
        width: 75vw;
        height: 5vh;
    }
    #top{
        margin:10px;
    }
    #bottom{
        margin:5px;
    }
    button{
        background-color: #2997d9;
        width: 90vw;
        height: 40px;
        border: 1px solid #2997d9;
        border-radius: 12px;
        margin:10px;
        color: #fff;
        font-size: 15px
    }
    #other-login{
        text-align: center;
    }
    #other-login span{
        color: #98b6c7;
        font-size: 15px;
    }
    #other-login img{
        width: 50px;
        /*height: 50px;*/
        border-radius: 50%; 
    }
    a{
        text-decoration: none;
        color: #0894ec;
    }
    .layer{
        /*width: 100px;*/
        height: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        line-height: 50px;
        text-align: center;
        /*border: 1px  solid  black;*/
        position: absolute;
        left: 35%;
        top: 180px;
        border-radius: 5px;
    }

</style>